<div>
  <button matButton="elevated" (click)="clearTable()">Clear table</button>
  <button matButton="elevated" (click)="addData()">Add data</button>
</div>

<wrapper-table [dataSource]="dataSource" [columns]="displayedColumns"
               matSort #sort="matSort">
  <!-- Custom column definition to be provided to the wrapper table. -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Custom row definitions to be provided to the wrapper table. -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  <!-- Row shown when there is no matching data that will be provided to the wrapper table. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data</td>
  </tr>
</wrapper-table>
